/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-07-29 14:24:43
 * @LastEditTime: 2022-07-29 18:52:11
 */

import { useEffect, useMemo, useState } from 'react';
import { Button, Space, Table, Tag } from 'antd';
import classNames from 'classnames/bind';
import { IDispositionItemResponse, IDispositionListParams } from '@/api/archives/disposition';
import { useFormatMessage } from '@/utils/intlHelpers';
import { formatDate } from '@/utils';
import { useAppraisalAuditContext } from '../contexts/AppraisalAuditContext';
import EditAuditDialog from './dialogs/EditAuditDialog';
import AppraisalDialog from './dialogs/AppraisalDialog';
import type { IPageQuery } from '@/interfaces/global';
import styles from '../styles/pageList.module.scss';

const cx = classNames.bind(styles);
const { Column } = Table;

const PageList = (props: any) => {
  const { className } = props;
  const {
    selectATId,
    auditList,
    getDispositionListFunc,
    deleteDispositionAuditFunc,
    stateFilter,
    stateColorFilter
  } = useAppraisalAuditContext();
  const formatMessage = useFormatMessage();
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [listQuery, setListQuery] = useState<IPageQuery<Partial<IDispositionListParams>>>({
    pageNo: 1,
    pageSize: 10,
    param: {
      archiveTypeId: 65
    }
  });
  const [editVisible, setEditVisible] = useState(false);
  const [appraisalDialogVisible, setAppraisalDialogVisible] = useState(false);
  const [editInfo, setEditInfo] = useState<IDispositionItemResponse>();

  useEffect(() => {
    setListQuery({
      pageNo: 1,
      pageSize: 10,
      param: {
        archiveTypeId: selectATId
      }
    });
  }, [selectATId]);

  useEffect(() => {
    if (listQuery && listQuery.param?.archiveTypeId) {
      setLoading(true);
      getDispositionListFunc(listQuery)
        .then((res: any) => {
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  const showEditDialog = (data: IDispositionItemResponse) => {
    setEditInfo(data);
    setEditVisible(true);
  };

  const showAppraisalDialog = (data: IDispositionItemResponse) => {
    setEditInfo(data);
    setAppraisalDialogVisible(true);
  };

  return (
    <div className={className}>
      <Table
        dataSource={auditList}
        loading={loading}
        rowKey="id"
        scroll={{ x: 'max-content' }}
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="申请标题" dataIndex="title" key="title" />
        <Column title="全宗" dataIndex="fondName" key="fondName" align="center" />
        <Column title="档案类型" dataIndex="atName" key="atName" align="center" />
        <Column
          title="状态"
          dataIndex="status"
          key="status"
          align="center"
          render={(status) => <Tag color={stateColorFilter(status)}>{stateFilter(status)}</Tag>}
        />
        <Column title="创建人" dataIndex="proposer" key="proposer" align="center" />
        <Column title="相关批次" dataIndex="name" key="name" align="center" />
        <Column
          title="申请时间"
          dataIndex="applyTime"
          key="applyTime"
          align="center"
          render={(text) => (text ? formatDate(text) : '')}
        />
        <Column
          title="完成时间"
          dataIndex="endTime"
          key="endTime"
          align="center"
          render={(text) => (text ? formatDate(text) : '')}
        />
        <Column
          title="查看鉴定结果"
          key="auditResult"
          align="center"
          render={(_text, record: any) => (
            <Button type="link" size="small" onClick={() => {}}>
              查看
            </Button>
          )}
        />
        <Column
          title={formatMessage('tableAction')}
          key="action"
          className={cx('action-col')}
          align="center"
          render={(_text, record: any) => (
            <Space>
              <Button type="link" size="small" disabled>
                处理
              </Button>
              <Button
                type="link"
                size="small"
                onClick={() => {
                  showEditDialog(record);
                }}
              >
                修改
              </Button>
              <Button
                type="link"
                size="small"
                danger
                onClick={() => {
                  deleteDispositionAuditFunc(record.id);
                }}
              >
                删除
              </Button>
            </Space>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <EditAuditDialog
            visible={editVisible}
            data={editInfo}
            onClose={() => {
              setEditVisible(false);
            }}
          />
        ),
        [editVisible]
      )}
      {useMemo(
        () => (
          <AppraisalDialog
            visible={appraisalDialogVisible}
            data={editInfo}
            onClose={() => {
              setAppraisalDialogVisible(false);
            }}
          />
        ),
        [appraisalDialogVisible]
      )}
    </div>
  );
};

export default PageList;
